<template>
  <table-block>
    <template-query
      slot="query"
      :configs="queryListFields"
      inline-item
      @query="handleSearch"
    >
    </template-query>
    <template-table
      :datas="datas"
      is-order-number
      :loading="isLoading"
      :configs="cashOutListFields"
      need-mark-prop="status"
      :need-mark-prop-val="-1"
      @refresh="fetchData"
    >
      <el-table-column fixed="right" label="操作" width="135">
        <template slot-scope="{ row }">
          <el-button type="text" @click="viewDetail(row)" style="margin-right: 10px;">收款码</el-button>
          <popconfirm
            v-if="row.status === 1"
            title="打款"
            text="是否已打款?"
            @confirm="confrimPayment(row)"
          />
        </template>
      </el-table-column>
    </template-table>
    <el-pagination
      slot="pagination"
      :current-page="page"
      :page-size="limit"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @current-change="handlePageChange"
      @size-change="handleLimitChange"
    />
    <el-dialog :visible.sync="dialogVisible" title="预览" width="800px">
      <img :src="imgUrl" style="display: block; max-width: 100%; margin: 0 auto;">
    </el-dialog>
  </table-block>
</template>

<script>
import { getCashOutList, updateCashOut } from 'dependencies/api/wallet'
import { cashOutListFields, queryListFields, columns } from './config'
import TablePageMixins from 'modules/mixins/table-page'
export default {
  name: 'WalletList',
  mixins: [TablePageMixins],
  data() {
    return {
      cashOutListFields,
      queryListFields,
      queryParam: {},
      dialogVisible: false,
      imgUrl: ''
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    getDatas() {
      return getCashOutList({
        formData: this.queryParam,
        pageIndex: this.page,
        pageSize: this.limit,
        columns: columns
      })
    },
    async confrimPayment(row) {
      const params = {
        ...row,
      }
      this.loading()
      try {
        const data = await updateCashOut(params);
        if (data.code === 0) {
          this.$message.success(`打款成功!`)
          this.fetchData()
        }
      } catch(err) {
        console.log('confirm payment error : ', err)
      } finally {
        this.loaded()
      }
    },
    handleSearch(params) {
      this.queryParam = { ...params }
      this.page = 1
      this.fetchData()
    },
    viewDetail(row) {
      vk.callFunction({
        url: 'admin/system/user/sys/getInfo',
        title: '请求中...',
        data: {
          user_id: row.user_id
        },
        success: (res) => {
          if (res.code === -1) {
            this.$message.warning(res.msg || '查询收款码失败')
          }
          if (res.code === 0) {
            if (res.data && res.data.wechat_payment_code_url) {
              this.imgUrl = res.data.wechat_payment_code_url
              this.dialogVisible = true
            } else {
              this.$message.warning('用户未上传收款码')
            }
          }
        },
        fail(res) {
          this.$message.warning(res.msg || '查询收款码失败')
        }
      });
    }
  }
}
</script>
